// 导入node.js 中专门操作路径的模块
const path = require('path')

// 1.导入htmlPlugin 插件 得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2.创建插件的实例
const htmlPlugin = new HtmlPlugin({
  template:'./src/index.html',//指定要复制文件的路径
  filename:'./index.html'//指定复制后文件的路径和文件名
})

// 使用 node.js 中的到处语法，向外导出一个webpack 的配置对象
module.exports = {
  devtool:'nosource-source-map',
  // 在开发调试阶段 将devtool的值 设置为eval-source-map
  // devtool:'eval-source-map',

  //如果指向定位报错的具体行数，且不想暴漏源码 将devtool的值设置为nosource-source-map(在实际发布时可以设置，或者直接关闭)
  devtool:'nosource-source-map',

  mode:'development', //指定构建模式 可选值 development 和 production

  plugins:[htmlPlugin], //3.将插件实例放入plugins节点下，使htmlPlugin插件生效
  // 通过devServer 节点对webpack-dev-server 插件进行更多的配置。
  devServer:{
    open:true,//初次打包完成后，自动打开浏览器
    host:'127.0.0.1',//实时打包所使用的主机地址
    port:80// 实时打包所使用的端口号
  },
  // __dirname 代表项目的根目录
  entry:path.join(__dirname,'./src/index.js'), //指定入口文件的路径
  output:{
    path:path.join(__dirname,'./dist'), //输出文件存放的路径
    filename:'js/main.js' //输出文件的名称 (放入js子目录下)
  },

  //所有第三方文件模块的匹配规则
  module:{
    //文件后缀名的匹配规则
    rules:[
      //test表示匹配的文件类型，use 表示对应要调用的loader
      {test:/\.css$/,use:['style-loader','css-loader']},
      //处理less文件
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
      // 处理图片文件
      // limit 指定可转换base64位的图片大小上限（22228个字节） 多个参数使用& 进行分隔拼接
      {test:/.\jpg|png|gif$/,use:'url-loader?limit=22228&outputPath=images'}
    ]
  },

  resolve:{
    // 配置别名
    alias:{
      // 告诉webpack ，@ 符号代表src这一层目录
      '@':path.join(__dirname,'./src/')
    }
  }
}